<template>
    <div class="body">
        <el-menu
                router
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <div class="logo">
                    <img  src="@/static/img/logo.png">
                    <p>健景体检中心</p>
                </div>
                <div class="menu">
                    <el-menu-item index="/menu/home">
                        <i class="el-icon-s-home"></i>
                        首页
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-tickets"></i>开单</template>
                        <el-menu-item index="/menu/billing/items">项目</el-menu-item>
                        <el-menu-item index="/menu/billing/combinations">套餐</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3" >
                        <template slot="title"><i class="el-icon-goods"></i>购物车</template>
                        <el-menu-item index="/menu/shopping/shopProject">项目购物车</el-menu-item>
                        <el-menu-item index="/menu/shopping/shopCombination">套餐购物车</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4" >
                        <template slot="title"><i class="el-icon-s-custom"></i>个人中心</template>
                        <el-menu-item index="/personInfo">个人信息</el-menu-item>
                        <el-menu-item index="/menu/person/order">我的订单</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"><i class="el-icon-user"></i>登录/注册</template>
                        <el-menu-item index="/login">退出登录</el-menu-item>
                        <el-menu-item index="/reg">注册</el-menu-item>
                    </el-submenu>
                </div>
                
            </el-menu>
           
            <div>
                <router-view></router-view>
            </div>
    </div>
</template>

<script>
import {removeToken} from '@/utils/authToken.js'

export default {
    data() {
    
        return {
            activeIndex: this.$route.path,
            menuData: [],
            
        };
    },
    created() {
        // 组件挂载完成后从localStorage获取图片路径 
        this.src = localStorage.getItem('patientFace');
        this.pwd = this.$store.state.patientPwd;
    },
    computed: {
        activeMenu() {
        const route = this.$route;
        const { meta, path } = route;
        // 此处添加判断的原因见说明
        if (meta.matchPath) {
            return meta.matchPath;
        } else {
            return path;
        }
        }
    },
    methods: {

    
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
    
}
</script>
<style scoped >
    .body{
        margin:-8px;
    }

    .menu{
        display: flex; justify-content: center; align-items: center;
    }
    .logo{
        float: left;
        /* margin: 0; */
    }    
    .logo img{
        width: 30px;
        height: auto;
        vertical-align:middle;
    }
    .logo p{
        font-size: 12px;
        color: white;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        /* line-height: 60px; */
    }
    
    .el-aside {
        background-color: #545c64;
        color: #333;
        text-align: left;
        /* line-height: 200px; */
        height: 100vh;
    }
    
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /* line-height: 160px; */
    }
    
    body > .el-container {
        margin-bottom: 40px;
    }
</style>

